<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>匹配通知-需求信息</title>
		<link rel="stylesheet" type="text/css" href="../css/common/common.css"/>
		<link rel="stylesheet" type="text/css" href="../css/index.css"/>
		<script type="text/javascript" src="../js/viewport.js" ></script>
	</head>
	<body>
		<nav class="site-header">
			<ul class="clearfix">
				<li class="active"><a href="javascript:void(0)">投递意向</a></li>
				<li><a href="javascript:void(0)">上传案例</a></li>
				<li class="contact-customer"><a href="javascript:void(0)">联系客户</a></li>
			</ul>
		</nav>
		
		<section class="main">
			<!--倒计时 start-->
			<div class="main-timer">
				<div class="timer-icon"></div>
				<div class="timer-text">匹配倒计时</div>
				<div class="timer">
					<span class="hour">23</span><i>:</i>
					<span class="min">59</span><i>:</i>
					<span class="second">59</span>
				</div>
			</div>
			<!--倒计时 end-->
			<div class="main-header">
				<a class="header-btn active">需求详情</a>
				<a class="header-btn">产品标签</a>
			</div>
			<div class="main-content">
				<!--标识 ： 已下单：order-text ；   诚意金 : earnest-text -->
				<div class="content-top order-text clearfix">
					<div class="icon">已下单</div>
					<div class="text">服务方已托管首款的标识，可放心承接项目。</div>
				</div>
				<div class="content-top earnest-text clearfix">
					<div class="icon">诚意金</div>
					<div class="text">支付了诚意金的特别标识，证明需求方发布需求的真实可信。</div>
				</div>
				<!---->
				<!--需求详情 view start-->
				<div class="view-detail content-center">
					<div class="list-item">
						<p class="label">需求标题</p>
						<span class="text">设置便携风扇</span>
					</div>
					<div class="list-item">
						<p class="label">合作模式</p>
						<span class="text">项目制</span>
					</div>
					<div class="list-item">
						<p class="label">设计方案</p>
						<span class="text">外观设计、内部结构</span>
					</div>
					<div class="list-item">
						<p class="label">服务内容</p>
						<span class="text">全新设计</span>
					</div>
					<div class="list-item">
						<p class="label">产品品类</p>
						<span class="text">家电-生活小家电-小夜灯</span>
					</div>
					<div class="list-item">
						<p class="label">外观金额</p>
						<span class="text">待定，需报价</span>
					</div>
					<div class="list-item">
						<p class="label">结构金额</p>
						<span class="text">待定，需报价</span>
					</div>
					<div class="list-item">
						<p class="label">所在地区</p>
						<span class="text">广东省广州市</span>
					</div>
					<div class="list-item">
						<p class="label">产品信息</p>
						<span class="text">https://search.jd.com/Search?keyword=%E4%BE%F%E6%90%BA%E9%A3%8E</span>
					</div>
					<div class="list-item item-inform">
						<p class="label">产品资料</p>
						<ul class="inform-list">
							<li class="clearfix">
								<span class="li-text">产品资料</span>
								<a class="btn" href="">下载</a>
							</li>
							<li class="clearfix">
								<span class="li-text">产品资料</span>
								<a class="btn" href="">下载</a>
							</li>
						</ul>
					</div>
					<div class="list-item">
						<p class="label">功能及重 点要求</p>
						<span class="text">要女性喜爱，有安全感</span>
					</div>
				</div>
				<!--需求详情 view end-->
				<!--产品标签 view start-->
				<div class="view-label content-center">
					<div class="list-item">
						<p class="label">产品定位</p>
						<span class="text">高端</span>
					</div>
					<div class="list-item">
						<p class="label">销售区域</p>
						<span class="text">国内</span>
					</div>
					<div class="list-item">
						<p class="label">主要材质</p>
						<span class="text">塑料</span>
					</div>
					<div class="list-item">
						<p class="label">控制方式</p>
						<span class="text">机械</span>
					</div>
					<div class="list-item">
						<p class="label">产品风格</p>
						<span class="text">日韩风格</span>
					</div>
					<div class="list-item">
						<p class="label">产品属性</p>
						<span class="text">色彩淡雅、智能</span>
					</div>
					<div class="list-item">
						<p class="label">适用人群</p>
						<span class="text">女性</span>
					</div>
					<!--暂无该产品标签 start-->
					<div class="view-nodata">
						<div class="icon"></div>
						<p>暂无该产品标签</p>
					</div>
				</div>
				<!--产品标签 view end-->
			</div>
		</section>
		
		<footer class="footer clearfix">
			<!--<a class="footer-btn">已承接</a>
			<a class="footer-btn graybtn">已过期</a>
			<a class="footer-btn redbtn">已拒绝</a>-->
			<a class="refusebtn halfbtn fl">拒绝需求</a>
			<a class=" halfbtn fr">承接需求</a>
		</footer>
		
		<!--报价弹窗 start-->
		<div class="site-window">
			<!--需求报价   只有一个需要报价时    加入 odd   class="content-form odd" -->
			<div class="win-content">
				<div class="content-title">报价</div>
				<div class="content-form">
					<form action="" method="post">
						<input class="inputtext" type="text" name="" id="" value="" placeholder="请输入外观设计报价"/>
						<input class="inputtext" type="text" name="" id="" value="" placeholder="请输入结构设计报价"/>
						<input class="reset" type="reset" value=""/>
					</form>
				</div>
				<div class="updata"><a class="btn">确认投递</a></div>
			</div>
		</div>
		<!--报价弹窗 end-->
	</body>
	<script type="text/javascript" src="../js/jquery-1.12.4.min.js" ></script>
	<script type="text/javascript" src="../js/common.js" ></script>
	<script>
		
		//1.需求详情与产品标签   的切换
		var $header_btn = $('.header-btn'),
			$view_model = $('.content-center');
		$header_btn.click(function(){
			$header_btn.removeClass('active');
			$(this).addClass('active');
			$view_model.css('display','none');
			$view_model.eq($(this).index()).css('display','block');
		});
		
		
		//2.报价弹窗
		alertView();
		function alertView(){
			var $footer_btn = $('.footer-btn'),
				$site_window = $('.site-window'),
				$win_content = $('.site-window .win-content'),
				$site_btn = $('.site-window .updata .btn');     //确定投递btn
			
			inputFocus('.site-window');
			
			$footer_btn.click(function(){
				$site_window.fadeIn();
			});
			$win_content.click(function(e){
				e.stopPropagation();
			});
			$site_window.click(function(){
				$site_window.fadeOut();
				$('.site-window .reset').trigger('click');
			});
			
			
			$site_btn.click(function(){
				var $input = $('.site-window .inputtext');
				if($input.val() == ''){
					$input.css('border-color','#ee0003');
				}
			});
		}
		
		
		
	</script>
</html>
